const path = require('path')

// 获取接口域名及端口等信息
const apiBaseUrl = process.env.REACT_APP_API

const {
  override,
  addWebpackAlias, // 用于配置别名的
  addLessLoader, // 用于加载less文件
  addDecoratorsLegacy, // 用于使用ES的装饰器
  fixBabelImports, // antd 按需加载
  overrideDevServer, // 开发服务器 // 跨域
  addPostcssPlugins, // 转换css文件的工具
} = require('customize-cra')

// 雪碧图生成的插件
const SpritesmithPlugin = require('webpack-spritesmith')
/**
 * 代理配置
 * 这是一个闭包，返回一个回调函数，customize-cra在执行这个回调的时候，会将当前的开发服务器的配置项以参数的形式传给我们
 * 我们对这个config进行一个简单的处理后返回给customize-cra
 */
function addProxy() {
  return config => {
    // 将配置好的config返回给customize-cra
    return {
      ...config,
      // 代理服务配置
      proxy: {
        // 拦截器（拦截所有以"/api"开头的http请求）
        '/api': {
          // 配置一个base url
          target: apiBaseUrl,
          // 是否修改源，它决定我们是否跨域
          changeOrigin: true,
          // 是否重写我们的拦截关键字
          // pathRewrite: {
          //   "^/api": "/api",
          // },
        },
        // 用于支付的拦截器
        '/capi': {
          target: 'http://pay.fenotes.com:8090',
          changeOrigin: true,
          pathRewrite: { '^/capi': '/api' },
        },
      },
    }
  }
}

module.exports = {
  webpack: override(
    // 使用装饰器
    addDecoratorsLegacy(),
    // 解析less
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
      },
      sourceMap: true,
    }),
    // 这个需要注意，这是只有移动端需要，如果是pc端，把这块注释掉
    addPostcssPlugins([
      require('postcss-px2rem-exclude')({
        remUnit: 37.5,
        exclude: /node_modules/i,
      }),
    ]),
    // antd 4已经不需要这个功能了，但我们需要了解，以便维护antd 4以下版本的项目
    fixBabelImports('import', {
      libraryName: 'antd',
      style: 'css',
    }),
    // 别名
    addWebpackAlias({
      '@': path.resolve(__dirname, 'src'),
    }),
    // 更多的配置
    config => {
      config.plugins.push(
        // 生成雪碧图的配置
        new SpritesmithPlugin({
          src: {
            cwd: path.resolve(__dirname, 'src/assets/icons'),
            glob: '*.png',
          },
          target: {
            image: path.resolve(__dirname, 'src/assets/sprite.png'),
            css: path.resolve(__dirname, 'src/assets/sprite.less'),
          },
          apiOptions: {
            cssImageRef: 'sprite.png',
          },
        })
      )
      return config
    }
  ),
  // 开发环境服务器代理, 一般情况下不需要我们自己配
  devServer: overrideDevServer(addProxy()),
}
